<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03_边框与内间距测试</title>
        <style>
            .d1 {
                width:200px;
                height:200px;
                background-color: #0aa1ed;
                border:5px solid #f00;
                /*可设置单方向的边框*/
                border-top: 9px dashed #00f;
                /*边框圆角 radius半径的意思 值越大 角越园 当值为正方形宽高的一半可以切出圆形 */
                border-radius:100px;
            }
            .d2 {
                width:200px;
                height:200px;
                background-color: pink;
                /*默认加边框与内间距都会让元素变大*/
                border:5px solid magenta;
                padding-left:50px;
                /*外间距会占据页面布局控件，但外间距不属于元素本身的大小，不会让元素变大*/
                margin:50px;
                /* 将盒子模型的计算方案换为边框盒子；
                意思就是无论是加内间距还是边框，元素的大小都不会改变，都算在预设的宽高之内 */
                box-sizing:border-box;
            }
            span {
                background-color: yellow;
            }
            .s2 {
                /*行内元素垂直方向的内外间距都不生效，不要使用！*/
                padding:50px;
            }





        </style>
    </head>
    <body>
        <div class="d1"></div>
        <div class="d2">内间距测试</div>
        <hr>
        <span>span1</span><span class="s2">span2</span><span>span3</span>


    </body>

</html>